<template>
  <div :class="[loaded ? 'gradient-wrapper' : '']">
    <img src="../assets/images/eat.gif" class="pull">
    <img :src="eatfoodsrc" class="choosepic">
    <img :src="src" @load="loaded = true" class="loadimg">
  </div>
</template>
<script>
  export default {
    props: ['src', "eatfoodsrc"],
    data() {
      return {
        loaded: false,
      }
    },

  }
</script>
<style scoped lang="less">
  @keyframes wrapper-gradient {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(0);
    }
  }

  @keyframes img-gradient {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }
  }

  .gradient-wrapper {
    display: inline-block;
    overflow: hidden;
    animation: wrapper-gradient 3s linear;
    width: 100%;
    height: 100%;
    background: RGB(212, 102, 85);
    position: relative;
  }

  .pull,
  .choosepic {

    position: absolute;
    bottom: -10px;
    z-index: 99;
    right: 0;

    animation: pulldisappear 1s forwards;
    animation-delay: 3s;
  }

  .pull {
    width: 150px;
    height: 150px;
    z-index: 2;
  }

  .choosepic {
    width: 100px;
    right: 100px;
    z-index: 1;
  }

  @keyframes pulldisappear {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      z-index: -1;

    }
  }

  .gradient-wrapper>.loadimg {
    animation: img-gradient 3s linear;
  }

  .loadimg {
    width: 100%;
    height: 100%;
  }
</style>